<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link type="text/css" rel="stylesheet" href="/css/index.css" >
    <link type="text/css" rel="stylesheet" href="/css/common.css">
    <link type="text/css" rel="stylesheet" href="/jars/bootstrap/css/bootstrap.css" >
    <script type="text/javascript" src="/jars/jquery/jquery-3.3.1.js" ></script>
    <script type="text/javascript" src="/js/index.js" ></script>
    <script type="text/javascript" src="/js/common.js" ></script>
    <script type="text/javascript" src="/js/AjaxFileupload.js"></script>
    <style>
        .marquee {
            width: 450px;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            animation: marquee 5s linear infinite;
        }

        .marquee:hover {
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
        }

        /* Make it move */
        @keyframes marquee {
            0% {
                text-indent: 27.5em
            }
        <!-- 将段落的第一行缩进 * * 像素 -->
            100% {
                text-indent: -105em
            }

            /*0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }*/
        }

        .box {
            width: 1500px;
            height: 400px;
            border: 1px solid;
            box-shadow: 2px 2px 2px #000; /*属性向框添加一个或多个阴影。*/
            overflow: hidden;
            position: relative;
        }

        .box1, .box2 {
            width: 1298px;
            position: absolute;
        }

        .box2 {
            left: 1298px;
        }

        img {
            width: 432px;
            height: 400px;
            float: left;
        }
    </style>
</head>
<body>
<marquee style="color: red;" behavior="scroll" direction="right" align="absmiddle" width="70%">
    <!--
        behavior：设置文本在 marquee 元素内如何滚动。可选值有 scroll(连续滚动)，slide(滑动一次) 和 alternate(往返滚动)。 如果未指定值，默认值为 scroll。
        bgcolor：通过颜色名称或十六进制值设置背景颜色。
        direction：设置 marquee 内文本滚动的方向。可选值有 left, right, up and down。如果未指定值，默认值为 left。
        loop：设置 marquee 滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动.
        scrollamount：设置每次滚动时移动的长度（以像素为单位）。默认值为 6。
        scrolldelay：设置每次滚动时的时间间隔（以毫秒为单位）。默认值为 85。请注意， 除非指定 truespeed 值，否则将忽略任何小于 60 的值，并改为使用 60。
        truespeed：默认情况下，会忽略小于60的scrolldelay值。如果存在truespeed，那些值不会被忽略。
        vspace,hspace：表示运动区域边界的水平距离和垂直距离，以像素或百分比值设置垂直边距。
        width,height：表示运动区域的宽度和高度，以像素或百分比值设置高度。
        align：表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
        onmouseover=this.stop() onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动
     -->
    滚动展示公告：marquee标签展示公告内容。
</marquee>
<div class="marquee">css动画滚动展示公告：公告内容,animation : 动画名 时间 速度曲线 开始的时候延迟 播放次数 轮流反向播放。</div>
<div class="box" id="box">
    <div class="box1" id="box1">
        <img src="img/close.png">
        <img src="img/ginkgo_leaf.jpg">
        <img src="img/1.jpg">
    </div>
</div>
<div id="marquee" style="width: 1000px">css走马灯展示公告：公告内容,marquee : 通过js实现走马灯式展示公告内容，方法需要传入其父元素的ID。</div>
<div id="textup">
    <ul>
        <li><a href="#" target="_blank">脚本之家欢迎您的到来</a></li>
        <li><a href="#" target="_blank">只有努力才会有美好的明天</a></li>
        <li><a href="#" target="_blank">没有人一开始就是高手，都是从菜鸟开始</a></li>
        <li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li>
        <li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li>
        <li><a href="#" target="_blank">今天你写代码了吗</a></li>
        <li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li>
    </ul>
</div>
    <div>
        <#if userInfo?exists>
        ${userInfo.uname} 欢迎您登陆
        <#else>
        <input type="button" class="btn btn-primary" value="登录" onclick="toLogin()"/>
        </#if>
        <input type="button" class="btn btn-primary" value="退出" onclick="logout()"/>
        <input type="button" class="btn btn-primary" value="用户管理" onclick="userManager()"/>
        <input type="button" class="btn btn-primary" value="展示图片" onclick="showUserImg()"/>
    </div>
    <div>
        <form id="fileupload" action="/common/fileUpload" method="POST" enctype="multipart/form-data">
            <input type="file" code="files[]" multiple>
        </form>
    </div>
    <div>
        <input id="uploadFile" type="file" name="uploadFile">
        <button class="file_upload">上传</button>
    </div>
    <div>
        <p>
            <a href="/common/amap">查看高德地图</a>
        </p>
        <p>
            <a href="/common/bmapApi">查询地址</a>
        </p>
        <p>
            <a href="/common/bmap">查看百度地图</a><a href="/common/bmap2">查看百度地图2</a>
        </p>
    </div>
    <div>
        地址：<input type="text" name="address"/>地区：<input type="text" name="city">
        <a class="search" href="#">查询地址</a>
    </div>

    <div>
        地址2：<input type="text" name="address2"/>
        <a class="search" onclick="showMessage()" href="#">查询地址</a>
    </div>
    <div><a href="/upload/init">文件上传下载</a></div>
    <div>
        <p>${contextPath!''}</p>
        <p>${requestURI!''}</p>
        <p>${servletPath!''}</p>
        <p>
            <br>To break<br/>lines<br/>in a<br/>paragraph,<br/>use the br tag.Hello World!
        </p>
        <p>${escapeJson!''}</p>
    </div>
    <div style= "padding: 0px; width:800px; height:200px; text-align:center; background-color:#F69; display: table-cell; vertical-align:middle;">
        Hello World center！
    </div>
    <div style="width:800px; height:100px;text-align: center;background-color: greenyellow;margin: 0 auto">
        <span>Hello World!</span>
    </div>
    <div>
        <iframe name="kuaidi100" src="https://www.kuaidi100.com/frame/index.html" width="960" height="880"
                marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
    </div>
    <div>
        <a href="https://m.kuaidi100.com/" target="_blank">快递查询</a>
    </div>
    <div>
        <a href="/common/test" target="_blank">去测试页</a>
    </div>
<script type="text/javascript">
    window.onload = function () {
        marquee("box", 10);
        marquee();
        marquee("textup", 50, "upward");

    }
</script>
</body>
</html>